<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Location Demo</title>
        <link rel="stylesheet" type="text/css" href="default.css">
        <script type="text/javascript" src="http://www.big5apps.com/api/bigfive.js">
        </script>
        <script type="text/javascript">
            
            function showMap(position){
                $('dev-geo').style.display = "block"
                $('dev-geo-msg').style.display = "none"                
                $('dev-lat').innerHTML = position.coords.latitude.toString();
                $('dev-lon').innerHTML = position.coords.longitude.toString();
                var url = ("http://big5apps.appspot.com/map?lat=" +
	                position.coords.latitude +
	                "&amp;lon=" +
	                position.coords.longitude +
	                "")
                $('dev-map').src = url
            }
            
            function handleError(error){
                alert(error.message)
            }
            
            // Get current geo position
            function getLocation(){
                $('dev-geo-msg').style.display = "block"
                Device.Location.getCurrentPosition(showMap, handleError)
                return false;
            }
        </script>
    </head>
    <body>
        <h1>Location Demo</h1>
        <a id="back" href="index.html">Back</a>
        <p align="middle">
            <button onclick="getLocation()">
                Show geo location
            </button>
        </p>
        <p style="display: none; font-weight: bold;" id="dev-geo-msg" align="middle">
            Getting current coordinates. 
            <br/>
            <br/>
            <img src="loader.gif" />
            <br/>
        </p>
        <div id="dev-geo" style="display: none;">
            <iframe src="about:blank" id="dev-map" style="width: 302px; height: 302px; margin-left: 4pt;">
            </iframe>
            <p>
                Your coordinates are <strong id="dev-lat">???</strong>, <strong id="dev-lon">???</strong>.
            </p>
        </div>
    </body>
</html>
